<template>
  <div class="code-editor">
    <b-code-editor
      ref="codeRef"
      height="100px"
      :indent-unit="2"
      v-model="modelValue"
      :readonly="disabled"
      lint
      @on-change="onJsonChange"
    />
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    value: String,
    disabled: Boolean
  },
  components: {},
  data () {
    return {
      modelValue: `{}`
    }
  },
  watch: {
    value (val) {
      this.modelValue = val
    }
  },
  mounted () {
    if (this.value) {
      this.modelValue = this.value
    }
  },
  methods: {
    onJsonChange () {
      this.$emit('input', this.modelValue)
    },
    getValue () {
      return this.$refs.codeRef.getValue()
    }
  }
}
</script>
<style lang="scss" scoped>
.code-editor {
  width: 100%;
  height: 100%;
}
/deep/ .CodeMirror pre.CodeMirror-line {
  line-height: 18px;
}
/deep/ .CodeMirror-scroll {
  min-height: 100px;
  padding-bottom: 0;
  margin-bottom: 0;
}
/deep/ .CodeMirror {
  min-height: 100px;
  height: 100px;
}
</style>
